<template>
	<view style="padding-bottom: 160rpx;" :class="containerClassName">
      <template>
        <!-- questionType有值时说明选项有图片 -->
        <!-- {{JSON.stringify(optnList)}} -->
        <view v-if="questionType" class="opt-imgs-wrapper">
          <view
            v-for="(item,index) in optnList" 
            class="opt-item-box"
            :class="[
              item.select&&item.select=='1'?'qcb-item-select':'qcb-item'
            ]" 
            :key="index" 
            @click="selectAnswer(item,index)"
          >
            <image class="img" :src="item.optnImg" mode=""></image>
          </view>
        </view>
        <view v-else>
          <view 
            v-for="(item,index) in optnList" 
            :class="[
              item.select&&item.select=='1'?'qcb-item-select':'qcb-item'
            ]" 
            :key="index" 
            @click="selectAnswer(item,index)"
          >
            <view>{{questionZiMu[index]}}.{{item.optnContent}}</view>
            <image v-if="item.select&&item.select=='1'" src="../../static/images/scl/qcb_emj.png" class="qi-emj" mode=""></image>
          </view>
        </view>
      </template>
      
    </view>
</template>

<script>
  import { mapState } from 'vuex'
	export default {
		name:"do-scl-question",
		props:['optnList','questionType', 'containerClassName'],
		data() {
			return {
				questionZiMu:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
				selectIndex:-1,
			};
		}, 
		methods:{
			selectAnswer(item,index){
				this.selectIndex = index;
				this.$emit('updateSelectSclQuestion',index);
			}
		}
	}
</script>

<style scoped lang="scss">
  // 测评样式
  @mixin evaluationStyle {
    .mentalHealth & {
      background-image: linear-gradient(90deg, #5BC6FB 0%, #8BD9FF 100%);

      .qi-emj {
        display: none;
      }
    }

    .depressed & {
      background-image: linear-gradient(90deg, #29C1D5 0%, #73E5F2 100%);

      .qi-emj {
        display: none;
      }
    }

    .sexuality & {
      background-image: linear-gradient(90deg, #003A77 0%, #388BFF 100%);

      .qi-emj {
        display: none;
      }
    }
	.goddess & {
	  background-image: linear-gradient(90deg, #FF99A7 0%, rgba(255,149,164,0.31) 100%);
	
	  .qi-emj {
	    // display: none;
	  }
	}
    .queen & {
      background-image: linear-gradient(90deg, #F28897 0%, rgba(255,149,164,0.31) 100%);

      .qi-emj {
        display: none;
      }
    }
  }

  .qcb-num{
  	font-size: 28rpx;
  	font-weight: bold;
  	color: #58B938;
  }
  .qcb-title{
  	font-size: 32rpx;
  	font-weight: bold;
  	color: #333333;
  	line-height: 54rpx;
  	margin-top: 30rpx;
  	margin-bottom: 48rpx;
  }
  .qcb-item-select{
  	width: 100%;
  	background: linear-gradient(90deg, #58B938 0%, #82E3BE 100%);
  	border-radius: 8rpx;
  	font-size: 28rpx;
  	font-weight: bold;
  	color: #FFFFFF;
  	line-height: 40rpx;
  	position: relative;
  	padding: 26rpx 88rpx 26rpx 30rpx;
  	box-sizing: border-box;
  	margin-bottom: 30rpx;
    @include evaluationStyle;
  }
  .qcb-item-select-b{
    width: 100%;
    background: linear-gradient(90deg, #AC8DFD 0%, #76C1FF 100%);
    border-radius: 8rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 40rpx;
    position: relative;
    padding: 26rpx 88rpx 26rpx 30rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
  }
  .qcb-item{
  	width: 100%;
  	background: #F5F5F5;
  	border-radius: 8rpx;
  	font-size: 28rpx;
  	font-weight: bold;
  	color: #333333;
  	line-height: 40rpx;
  	position: relative;
  	padding: 26rpx 30rpx;
  	box-sizing: border-box;
  	margin-bottom: 30rpx;
  }
  
.qi-emj{
	position: absolute;
	right: 30rpx;
	top: 24rpx;
	width: 48rpx;
	height: 48rpx;
}

.opt-imgs-wrapper{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  // gap:10rpx 34rpx;
  
  .opt-item-box{
    // width: calc((100%-20rpx)/2);
    width: 260rpx;
    // background: #F5F5F5;
    border-radius: 8rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    line-height: 40rpx;
    position: relative;
    border-radius: 8rpx;
    background: none;
    
    padding: 20rpx 16rpx;
    padding-bottom: 16rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
    
    .img{
      width: 228rpx;
      // height: 248rpx;
      height: 120rpx;
      // background: #D8D8D8;
      // background-color: rgba(100,100,100, .1);
      background-color: #fbfbfb;
    }
  }
  
  .qcb-item-select{
    background: linear-gradient( 90deg, #58B938 0%, #82E3BE 100%);
    color: #FFFFFF;
    @include evaluationStyle;
  }
}
</style>